<template>
    <div class="emb-guide-warp" v-if="detail">
        <h3>Embroidery details</h3>
        <p>Reference garment size：{{ sizeOption[detail.emb_output_size] }}&nbsp;(<span class="link-a"
                  @click="openGuideDialog()">Scaling guide</span>)</p>
        <div class="emb-guide-chart">
            <ProductDetailGuideTable :list="piece_list" :activePiece.sync="activePiece" :classify="productClassify"
                                     ref="guideTable"></ProductDetailGuideTable>
            <ProductDetailEmbGuidePreview :activePiece.sync="activePiece" :classify="productClassify">
            </ProductDetailEmbGuidePreview>
        </div>
        <!-- 说明 -->
        <div class="emb-guide-description">
            <dl>
                <dd>
                    <h4>Embroidery Specifications</h4>
                    <table class="des-table" style="margin-bottom: 40px;">
                        <tr>
                            <th>Embroidery Machine</th>
                            <th>Tajima TMEZ-S1501C</th>
                        </tr>
                        <tr>
                            <td>Embroidery File Format</td>
                            <td>
                                <ProductEmbDstTip></ProductEmbDstTip>
                            </td>
                        </tr>
                        <tr>
                            <td>Embroidery Type</td>
                            <td>Flat embroidery</td>
                        </tr>
                        <tr>
                            <td>Thread</td>
                            <td>COATS Sylko 120D</td>
                        </tr>
                        <tr>
                            <td>Maximum Thread Color</td>
                            <td>15 colors</td>
                        </tr>
                        <tr>
                            <td>Maximum Stitches</td>
                            <td>
                                <p>3" x 4" (25000 stitches)</p>
                                <p>3" x 12" (75000 stitches)</p>
                                <p>12" x 12" (200000 stitches) </p>
                            </td>
                        </tr>
                    </table>
                </dd>
                <dd>
                    <h3>Thread Color</h3>
                    <ul>
                        <li v-for="{ rgb, name } in colorOption" :key="rgb">
                            <p :style="`background-color: ${rgb}`"></p>
                            <span>{{ name }}</span>
                        </li>
                    </ul>
                </dd>
                <dd>
                    <h3>Supported File Formats</h3>
                    <h5>Embroidery Files (<ProductEmbDstTip></ProductEmbDstTip>)</h5>
                    <h6>
                        Upload professional embroidery designs in .dst format and we'll bring them to life.
                    </h6>
                    <h5>Text</h5>
                    <h6>
                        Over 160 fonts are available for selection. You can customize font position, size, color,
                        rotation, and shape.
                    </h6>
                    <h5>Images</h5>
                    <h6>
                        Image embroidery will be supported in a future release.
                    </h6>
                    <figure>
                        <img v-lazy="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/product-detail-emb.png')"
                             alt="product-detail-emb">
                    </figure>
                </dd>
                <dd>
                    <h3>Do's and Don'ts</h3>
                    <h5>1. Avoid using tiny text and thin lines</h5>
                    <h6>Small letters or thin lines can be hard to discern in the final embroidery.</h6>
                    <h5>2. Reduce the use of solid backgrounds</h5>
                    <h6>
                        Patterns covering most of the embroidery area may exceed the maximum stitch count limit,
                        significantly increasing costs.
                    </h6>
                    <h5>3. Avoid including small details</h5>
                    <h6>
                        Ensure your embroidery design does not have too many small details, as they might not be visible
                        clearly.
                    </h6>
                    <h5>4. Choose appropriate garments</h5>
                    <h6>
                        The type of fabric you choose is key to your embroidery's appearance. For big or detailed
                        designs with sharp edges, go for thicker fabrics like sweatshirts. They give better support and
                        prevent fabric damage. Lighter fabrics like thin T-shirts, especially those under 200g, are
                        better for smaller, simpler designs to keep the fabric smooth.
                    </h6>
                    <h5>5. Minimize color changes </h5>
                    <h6>
                        Our design creator allows for up to 30 color changes within an embroidery design. For
                        multi-color designs, please streamline the color sequence to eliminate redundant color
                        change(COLOR_BREAK) commands.
                    </h6>
                </dd>
                <dd>
                    <h4>Pricing</h4>
                    <p>
                        You can add multiple embroidery frames (areas for placing embroidery on garments) to each
                        product template. Each frame has different dimensions, stitch counts, and prices:
                    </p>
                    <ProductDetailPriceTable :table="priceTable" :loading="price_loading">
                    </ProductDetailPriceTable>
                    <p>
                        *The number of thread colors you select won't change the cost of your embroidery.
                        <br />
                        *No digitization fees, whether you upload DST files or add custom text.
                    </p>
                </dd>
                <dd>
                    <h4>Scaling Guide</h4>
                    <p>
                        Embroidered patterns will maintain their actual size across all garment sizes. If a garment has
                        both DTG and embroidery on the same side, neither will be scaled.
                    </p>
                    <figure style="max-height: 336px">
                        <img v-lazy="$getImageWebPByUrl('https://img.podpartner.com/static/images-20240628/emb_scaling_preview.png')"
                             alt="">
                    </figure>
                </dd>
                <dd>
                    <h3>FAQS</h3>
                    <h5>
                        1. Can I use both DTG printing and embroidery on the same product?
                    </h5>
                    <h6>
                        Yes, you can use both DTG printing and embroidery on the same product template at PODpartner.
                    </h6>
                    <h5>
                        2. Will adding DTG printing to my custom embroidery order increase the production time?
                    </h5>
                    <h6 style="">
                        Absolutely not! Integrating DTG printing into your custom embroidery order won't extend the
                        production time. For detailed shipping information, please visit the
                        "<a class="link-a" href="https://www.podpartner.com/document/logistics"
                           target="_blank">Shipping</a>"
                        section in the
                        navigation bar on our official website.
                    </h6>
                    <h5>3. Can I upload images for embroidery?</h5>
                    <h6>Currently, we only accept .dst files for embroidery. Image embroidery is coming soon! Stay
                        tuned!</h6>
                    <h5>4. Are there any digitization fees for embroidery at PODpartner?</h5>
                    <h6>
                        There are no digitization fees for uploading .dst files or using custom text embroidery.
                        However, you are responsible for ensuring the quality of the .dst file you upload, as we will
                        use it directly for production once we receive your order. Any production issues caused by
                        errors in your uploaded .dst file will be your responsibility.
                    </h6>
                    <h5>5. Does the number of thread colors affect the price of my embroidery?</h5>
                    <h6> No. The price remains the same whether you use one color or 15 colors in your embroidery
                        design.</h6>
                    <h5>6. Will the final garment look exactly like my design?</h5>
                    <h6>
                        While we strive to produce garments that closely match your design, there may be subtle
                        differences due to the printing process and fabric characteristics. Factors such as color
                        variances, fabric texture, and techniques can affect the final appearance. If there is a
                        discrepancy between the design area and the mockups, the final appearance will be based on the
                        design area.
                    </h6>
                </dd>
            </dl>
        </div>
        <ProductScalingDialog v-model="scaling_dialog"></ProductScalingDialog>
        <UxDialog class="web-image-dialog" :visible="web_image_dialog" @close="closeWebDialog()">
            <ProductDetailEmbGuidePreview :activePiece.sync="web_image_active"></ProductDetailEmbGuidePreview>
        </UxDialog>
    </div>
</template>
<script>
const size_option = {
    // 'M01': "XXS",
    'M02': "XS",
    'M03': "S",
    'M04': "M",
    'M05': "L",
    'M06': "XL",
    'M07': "2XL",
    'M08': "3XL",
    'M09': "4XL",
    'M10': "5XL",
}
const colorOption = [
    { rgb: '#000000', name: 'Black' },
    { rgb: '#ABB0B2', name: 'Silver Gray' },
    { rgb: '#FFFFFF', name: 'White' },
    { rgb: '#95704E', name: 'Old Gold' },
    { rgb: '#FFCC00', name: 'Yellow' },
    { rgb: '#FA5716', name: 'Orange' },
    { rgb: '#F0297F', name: 'Flamingo' },
    { rgb: '#131F4F', name: 'Navy' },
    { rgb: '#78BE3F', name: 'Lime Green' },
    { rgb: '#007848', name: 'Kelly Green' },
    { rgb: '#005397', name: 'Royal Blue' },
    { rgb: '#00A8E0', name: 'Aqua' },
    { rgb: '#670001', name: 'Maroon' },
    { rgb: '#B82828', name: 'Red' },
    { rgb: '#5F388C', name: 'Purple' },
]
const surfaceNameMapping = {
    "Front Side": "Front",
    "Back Side": "Back",
    "Sleeve Left": "Left Sleeve",
    "Sleeve Right": "Right Sleeve",
    "Long Sleeve Left": "Sleeve Left",
    "Long Sleeve Right": "Sleeve Right",
    "Neck Label Inner": "Inside Neck Label",
}
const sortRule = {
    1: 'Front Side',
    2: 'Back Side',
    3: 'Sleeve Left',
    4: 'Sleeve Right',
    5: 'Long Sleeve Left',
    5: 'Long Sleeve Right',
    5: 'Neck Label Inner',
}
export default {
    name: "DetailEmbGuide",
    props: ['detail', 'visible'],
    data () {
        return {
            sortRule: sortRule,
            sizeOption: size_option,
            colorOption: colorOption,
            surfaceNameMapping: surfaceNameMapping,
            data: [],
            activePiece: null,
            priceTable: [],
            price_loading: false,
            option: {
                expire_time: 60 * 60 * 24 * 1000
            },
            scaling_dialog: false,
            web_image_dialog: false,
            web_image_active: null,
            windowWidth: 0,
        }
    },
    computed: {
        piece_list () {
            const list = this.detail?.piece_list || [];
            const option = this.priceTable || [];
            const group = {};

            try {
                for (const item of list) {
                    const { surface_name, optional_platens } = item;
                    if (!group[surface_name]) group[surface_name] = [];
                    if (typeof optional_platens === 'string') item.optional_platens = JSON.parse(optional_platens);
                    item.mappingName = this.surfaceNameMapping[surface_name] ?? surface_name;

                    item.children = Array.isArray(optional_platens) ? optional_platens.map(e => option.find(o => o.code === e.code)).filter(Boolean) : [];
                    group[surface_name].push(item);
                }
            } catch (error) {
                console.error(error);
            }

            const result = []
            // 进行排序
            Object.values(this.sortRule).forEach(key => {
                if (group[key]) result.push(group[key])
            })
            return result
        },
        productClassify () {
            return this.$getClassifyBySpu(this.detail?.spu) || ''
        }
    },
    watch: {
        activePiece: {
            handler: function (v) {
                let width = this.windowWidth;
                if (v) {
                    if (width <= 960) {
                        this.web_image_dialog = true;
                        this.$nextTick(() => {
                            this.web_image_active = v;
                        })
                    };
                } else {
                    if (width <= 960) {
                        this.web_image_dialog = false;
                    };
                }
            }, immediate: true
        },
        windowWidth: {
            handler: function (v) {
                if (v < 960) {
                    this.activePiece = null
                } else {
                    if (this.piece_list[0] && this.piece_list[0][0]) {
                        this.activePiece = this.piece_list[0][0]
                    }
                }
            }, deep: true
        }
    },
    methods: {
        closeWebDialog () {
            this.web_image_dialog = false
            this.web_image_active = null
        },
        openGuideDialog () {
            this.scaling_dialog = true
        },
        async getPriceData () {
            let send_ajax = true;
            try {
                const storage = JSON.parse(localStorage.getItem('EMB_OPT'));
                const now = new Date().getTime();
                if (storage.expire - now > 0) {
                    send_ajax = false;
                    this.priceTable = storage.value;
                }
            } catch (error) { }
            if (!send_ajax) return
            this.price_loading = true;
            const response = await this.$http("getEmbOpt", {});
            this.price_loading = false;
            if (response.code == 0) {
                localStorage.setItem('EMB_OPT', JSON.stringify({ value: response.data, expire: new Date().getTime() + this.option.expire_time }))
                this.priceTable = response.data;
            } else {
                this.$message.warning(response.data.msg)
            }
        },
        handleResize () {
            // 窗口大小变化时更新窗口宽度数据
            this.windowWidth = document.documentElement.clientWidth;
        }
    },
    mounted () {
        this.getPriceData()
        this.handleResize()
        // 监听窗口大小变化事件，更新 windowWidth
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy () {
        // 在组件销毁前移除窗口大小变化事件监听器
        window.removeEventListener('resize', this.handleResize);
    }
}
</script>
<style scoped lang="scss">
.emb-guide-warp {
    width: 100%;

    em {
        font-style: italic;
        text-decoration-line: underline;
    }

    &>h3 {
        font-family: Roboto-Medium, Roboto;
        font-size: 18px;
        color: #000000;
        line-height: 28px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    &>p {
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .link-a {
        color: #087196;
        text-decoration: underline;
        cursor: pointer;

        &:hover {
            color: #075e7d;
            text-decoration: none;
        }
    }

    .emb-guide-chart {
        display: flex;
        flex-direction: row;

        &>div {
            height: 550px;

            &:nth-child(1) {
                margin-right: 15px;
            }
        }
    }

    .emb-guide-description {
        margin: 48px 0 100px;
        color: #000;

        .des-table {
            width: 100%;
            max-width: 720px;

            th,
            td {
                text-align: left;
                padding: 14px 20px;
                border: 1px solid #E6E6E6;
            }

            th {
                background: #FAFAFA;
            }

            tr {

                &:nth-child(2n -1),
                &.bg {
                    background: #FAFAFA;
                }
            }

            td,
            th {
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #292929;
                line-height: 20px;

                &:nth-child(1) {
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    color: #000000;
                    line-height: 20px;
                }
            }
        }

        dl {
            dt {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 22px;
                color: #000000;
                line-height: 26px;
                margin-bottom: 14px;
                // & > svg,
                // & > img {
                //     float: left;
                //     width: 24px;
                //     height: 24px;
                //     margin-right: 8px;
                // }
            }

            dd {
                margin-bottom: 48px;

                &>h3 {
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 22px;
                    color: #000000;
                    line-height: 26px;
                    margin-bottom: 24px;
                }

                &>h4 {
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 20px;
                    color: #000000;
                    line-height: 20px;
                    margin-bottom: 20px;
                }

                &>h5 {
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 16px;
                    color: #000000;
                    line-height: 22px;
                    margin-bottom: 10px
                }

                &>h6 {
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #292929;
                    line-height: 22px;
                    margin-bottom: 24px;
                }

                &>p,
                &>.p {
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #292929;
                    line-height: 22px;
                    margin-bottom: 14px;

                    &.title {
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                    }
                }

                &>figure {
                    width: 100%;
                    max-height: 336px;

                    img {
                        width: 100%;
                        max-width: 100%;
                        max-height: 336px;
                    }
                }

                &>ul {
                    display: flex;
                    flex-flow: row wrap;
                    margin: -12px -12px;

                    li {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: 200px;
                        height: 44px;
                        margin: 12px 12px;

                        p {
                            width: 44px;
                            height: 44px;
                            border-radius: 6px;
                            border: 1px solid rgba(0, 0, 0, 0.2);
                            margin-right: 16px;
                        }

                        span {
                            flex: 1;
                            font-family: Roboto-Medium;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 22px;
                        }
                    }
                }

                &::v-deep>.overflow-box {
                    margin-bottom: 14px;

                    table {
                        width: 100%;
                    }
                }
            }
        }
    }
}

.web-image-dialog::v-deep {
    padding: 10px;

    & .emb-guide-preview {
        width: auto;
        height: auto;
        padding: 0 20px 20px;

        .text-name {
            margin: 24px 0;
        }
    }
}

@media (max-width: 960px) {
    .emb-guide-chart::v-deep {
        .emb-guide-table {
            width: 100%;
            margin-right: 0;

            table {
                width: 100%;

                th {
                    min-width: auto !important;
                    width: auto !important;
                    padding: 0 12px;
                }
            }

            td {
                button.active {
                    color: #555555;
                    text-decoration: underline;

                    &::after {
                        display: none;
                    }
                }
            }
        }

        .emb-guide-preview {
            display: none;
        }
    }

    .emb-guide-description {
        dl {
            dd {
                &>ul {
                    margin: -12px -40px;

                    li {
                        width: 120px !important;

                        p {
                            width: 48px;
                            height: 48px;
                            border-radius: 6px;
                            border: 1px solid rgba(0, 0, 0, 0.2);
                            margin-right: 12px;
                        }

                        span {
                            font-family: Roboto-Medium;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 22px;
                        }
                    }
                }
            }
        }
    }
}
</style>
